.dark {
  --color-bg-primary: #111827;
  --color-bg-secondary: #1e293b;
  --color-bg-light: #27354c;
  --color-bg-accent: #22c55e;
  --color-text-primary: #f7fafc;
  --color-text-secondary: #e2e8f0;
  --color-text-accent: #22c55e;
  --color-border-primary: #f7fafc;
  --color-border-secondary: #e2e8f045;
  --color-border-accent: #22c55e;
}

.light {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #edf2f7;
  --color-bg-light: #f9fafb;
  --color-bg-accent: #16a34a;
  --color-text-primary: #334155;
  --color-text-secondary: #64748b;
  --color-text-accent: #16a34a;
  --color-border-primary: #2d3748c1;
  --color-border-secondary: #edf2f7;
  --color-border-accent: #16a34a;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* @layer base {
  body {
    @apply dark:bg-slate-800 dark:text-white;
  }
} */

html {
  display: table;
  margin: auto;
}

body {
  /* padding: 0px 64px 0px 64px; */
  @apply px-4 md:px-8 lg:px-16 !important;
  /* margin: 0px auto; */
  min-width: 300px;
  max-width: 1400px;
  background: transparent;
  height: 100%;
  /* border: 2px solid green;  */
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
/* @import "antd/dist/antd.css"; */

.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  @apply text-accent !important;
  font-weight: 500;
}
.ant-tabs-nav::before {
  @apply border-secondary !important;
}
.ant-tabs-tab:hover {
  @apply text-accent !important;
}

.ant-tabs-tab {
  @apply text-primary !important;
}

.ant-tabs-ink-bar {
  @apply bg-accent !important;
}

.element.style {
  left: 0%;
  width: 100%;
}
.ant-slider-track {
  /* background: #6366f1 !important; */
  @apply bg-accent !important;
}
.ant-slider-rail {
  /* background: #d1d5db !important; */
  @apply bg-secondary !important;
}
.ant-slider-handle {
  /* border: solid 2px #6366f1 !important; */
  @apply border-accent !important;
}
.ant-slider-handle:hover {
  /* border: solid 2px #4f46e5 !important; */
  @apply border-accent brightness-75 !important;
}

.ant-switch-checked {
  @apply bg-accent !important;
  border: indigo;
}
.ant-switch {
  background-color: #d1d5db;
  border: grey;
}

.ant-modal-content {
  @apply dark:bg-primary dark:text-primary;
}
.ant-modal-footer {
  @apply border-secondary;
}
.ant-modal-header,
.ant-modal-close {
  @apply bg-secondary text-primary hover:text-primary    transition duration-200;
}
.ant-modal-title,
.ant-modal-header {
  @apply bg-primary text-primary;
}
a:hover {
  @apply text-accent;
}
/* .iiz__img,
iiz__zoom-img {
  @apply w-full;
} */

.ant-radio-checked .ant-radio-inner {
  @apply border-accent !important;
}

.ant-radio-checked .ant-radio-inner:after {
  @apply bg-accent !important;
}

.ant-radio:hover .ant-radio-inner {
  @apply border-accent !important;
}

.loadbar:after {
  content: "";
  /* width: 40px; */
  height: 3px;
  /* background: red; */

  position: absolute;
  animation: loader 2s;
  -webkit-animation: loader 2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  bottom: 0px;
  @apply rounded-b bg-accent;

  margin-left: 0;
}

@keyframes loader {
  0% {
    width: 0%;
    left: 0;
    right: 0;
  }
  50% {
    width: 100%;
    left: 0;
    right: 0;
  }
  99% {
    width: 0%;
    left: 100%;
    right: 0;
  }
}

@-webkit-keyframes loader {
  0% {
    width: 0%;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
    right: 0;
  }
  99% {
    width: 0%;
    left: 100%;
    right: 0;
  }
}

.scroll::-webkit-scrollbar {
  width: 8px; /* width of the entire scrollbar */
  height: 8px;
}

.scroll::-webkit-scrollbar-track {
  @apply bg-secondary;
  border-radius: 20px;
}

.scroll::-webkit-scrollbar-thumb {
  @apply bg-accent;
  border-radius: 20px; /* roundness of the scroll thumb */
  border: 3px solid rgb(214, 214, 214); /* creates padding around scroll thumb */
}

.vega-embed {
  @apply bg-primary rounded !important;
}

.ant-upload-list,
.ant-upload-hint,
.ant-upload-list-text,
.ant-upload-text,
.ant-upload-text-icon {
  @apply text-primary !important;
}

.ant-upload {
  @apply text-primary px-2  !important;
  border-radius: 4px !important;
}
.ant-upload:hover {
  @apply border-accent !important;
}
.ant-upload-drag-container,
.ant-upload-text,
.ant-upload-hint {
  @apply text-primary !important;
}

.ant-upload-list-item:hover,
.ant-upload-list-item-info:hover {
  @apply bg-secondary text-accent !important;
}
.ant-pagination .ant-pagination-item {
  @apply bg-primary  !important;
}
.ant-pagination .ant-pagination-item-active a {
  @apply text-accent  !important;
}
.ant-pagination .ant-pagination-item-active {
  @apply border-accent text-accent !important;
}
.ant-pagination .ant-pagination-item a,
.ant-pagination-item-link .anticon {
  @apply text-primary !important;
}
.ant-collapse-expand-icon .anticon {
  @apply text-primary !important;
}
.ant-modal-content {
  @apply dark:bg-primary dark:text-primary !important;
}
.ant-modal-footer {
  @apply border-secondary !important;
}
.ant-btn {
  @apply text-primary !important;
}
.ant-btn-primary {
  @apply bg-accent text-white !important;
}
.ant-btn-primary:hover {
  @apply bg-accent text-white drop-shadow-md !important;
}
.ant-modal-close {
  @apply text-primary   duration-200   !important;
}
.ant-modal-title,
.ant-modal-header {
  @apply bg-primary text-primary !important;
}
.ant-radio,
.ant-collapse,
.ant-collapse-header-text,
.ant-collapse-content-box,
.ant-collapse-content,
.ant-radio-wrapper {
  @apply text-primary !important;
}
.ant-collapse-borderless > .ant-collapse-item {
  @apply border-secondary !important;
}

.ant-skeleton-paragraph > li {
  @apply bg-secondary !important;
}

/* .ant-radio-input::before {
  @apply bg-primary !important;
} */

.prose > pre {
  padding: 0px !important;
  margin: 0px !important;
}

/* div.chatbox > ul {
  list-style: disc !important;
}
div.chatbox > ul,
div.chatbox > ol {
  padding-left: 20px !important;
  margin: 0px !important;
}
div.chatbox > ol {
  list-style: decimal !important;
} */

div#___gatsby,
div#gatsby-focus-wrapper {
  height: 100%;
  /* border: 1px solid green; */
}
